<template>
  <div class="container">
    <div class="table-wrap">
      <div class="table">
        <div class="tab">
          <span class="sort">序号</span>
          <span class="dengji">信用评级</span>
          <span class="num">人数</span>
          <span class="detail">查看详情</span>
        </div>
        <el-scrollbar  element-loading-background="transparent" v-loading="loading">
          <div class="item-wrap">
            <div v-for="(item, index) in tabList" :key="index" class="item">
              <span class="sort">{{ index + 1 }}</span>
              <span class="dengji">
                <img
                  v-for="i in item.xydj"
                  :key="i"
                  src="@img/cxgs/cxgs_13.png"
                  alt=""
                />
                <img
                  v-for="i in 5 - item.xydj"
                  :key="i"
                  src="@img/cxgs/cxgs_10.png"
                  alt=""
                />
              </span>
              <span class="num">{{ item.count }}</span>
              <span class="detail">
                <img
                  @click="handleDetail(item.xydj)"
                  src="@img/cxgs/cxgs_07.png"
                  alt=""
                />
              </span>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getCXGSByMarket } from "@/apis/subjectInfo";
import { useRouter } from "vue-router";
const boyUrl = ref("src/assets/images/ztxx/boy.png");
const girlUrl = ref("src/assets/images/ztxx/girl.png");
let loading = ref(false);
const router = useRouter();
const tabList = ref();
const getInfo = () => {
  loading.value = true;
  getCXGSByMarket().then((res) => {
    tabList.value = res.data;
    loading.value = false;
  });
};
getInfo();

const handleDetail = (id) => {
  router.push({ name: "viewDetail", query: { id: id } });
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  .table-wrap {
    padding-top: 20px;
    .table {
      .tab {
        height: 40px;
        line-height: 40px;
        background: #4cc1ef;
        border-top-left-radius: 23px;
        border-top-right-radius: 23px;
        display: flex;
        justify-content: space-between;
        padding: 0 30px;
        color: #fff;
        font-size: 15px;
        span {
          display: inline-block;
        }
        .sort {
        }
        .dengji {
          img {
            width: 16px;
          }
        }
        .num {
        }
        .detail {
        }
      }
      .item-wrap {
        height: 420px;
      }
      .el-scrollbar {
        height: 100%;
      }
      .item {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        padding: 0 25px;
        color: #000;
        font-size: 15px;
        background: #c0edff;
        &:nth-child(2n-1) {
          background: #fff;
        }
        span {
          display: inline-block;
        }
        .sort {
          width: 34px;
          text-align: center;
        }
        .dengji {
          margin-left: 2px;
          width: 80px;
          text-align: center;
          img {
            width: 16px;
          }
        }
        .num {
          width: 24px;
        }
        .detail {
          line-height: 50px;
          img {
            height: 21px;
          }
        }
      }
    }
  }
}
</style>
